<!--
 * @Date: 2024-02-27 16:01:53
 * @Auth: 873768511@qq.com
 * @LastEditors: 873768511@qq.com
 * @LastEditTime: 2024-02-29 09:47:38
 * @FilePath: \ztc-web\src\views\overview\components\leftLine.vue
-->
<template>
  <div class="content">
    <el-radio-group class="radio-group" v-model="radio" size="small" @change="handleChange">
      <el-radio-button :value="1">周</el-radio-button>
      <el-radio-button :value="2">月</el-radio-button>
      <el-radio-button :value="3">年</el-radio-button>
    </el-radio-group>
    <div id="leftLine" class="chart"></div>
  </div>

</template>

<script setup>
import * as echarts from "echarts";
import { onMounted } from "vue";
import { getAlarmPy } from "@/api/screen"
const radio = ref(3)
const nameList = ref([])
const countList = ref([])
const pycountList = ref([])
const yxcountList = ref([])
function handleChange () {
	nameList.value = []
	countList.value = []
	pycountList.value = []
	yxcountList.value = []
	getAlarmPy({ type: radio.value }).then(res => {
		res.data.forEach(item => {
			nameList.value.push(item.label)
			countList.value.push(item.count)
			pycountList.value.push(item.pycount)
			yxcountList.value.push(item.yxcount)
		})
    init()
  })
}
function init () {
  let myChart = echarts.init(document.getElementById('leftLine'), null, {
    renderer:"svg",
  })
  myChart.setOption({
    backgroundColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
      { offset: 0, color: 'rgba(11, 53, 100, 0.00)' },
			{ offset: 1, color: 'rgba(11, 53, 100, 1.00)' }
		]),
		grid: {
			left: '5%',
			right: '10%',
			top:'20%',
			bottom: '15%',
			containLabel: true
		},
		tooltip : {
			show: true,
			trigger: 'item'
		},
		legend: {
			show:true,
			x:'center',
			y:'10',
			icon: 'stack',
			itemWidth:10,
			itemHeight:10,
			textStyle:{
				color:'#1bb4f6'
			},
			data:['告警','研判','有效']
		},
		xAxis : [
			{
				type : 'category',
				boundaryGap : false,
				axisLabel:{
					color: '#d7e7f4'
				},
				axisLine:{
						show:true,
						lineStyle:{
						color:'#397cbc'
					}
				},
					axisTick:{
						show:false,
					},
					splitLine:{
						show:false,
						lineStyle:{
							color:'#195384'
						}
					},
					data : nameList.value
	    	}
	    ],
	    yAxis : [
			{
				type : 'value',
				minInterval:1,
				axisLabel : {
					formatter: '{value}',
					color:'#2ad1d2'
				},
				axisLine:{
					lineStyle:{
						color:'#27b4c2'
					}
				},
				axisTick:{
					show:false,
				},
				splitLine:{
					show:true,
					lineStyle:{
						color:'#11366e'
					}
				}
			}
		],
		series : [
			{
				name:'告警',
				type:'line',
				stack: '总量',
				symbol:'circle',
				symbolSize: 8,
				itemStyle: {
					color:'#0092f6',
				},
				lineStyle: {
					color: "#0092f6",
					width:1
				},
				areaStyle: {
					//color: '#94C9EC'
					color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
						offset: 0,
						color: 'rgba(7,44,90,0.3)'
					}, {
						offset: 1,
						color: 'rgba(0,146,246,0.9)'
					}]),
				},
				markPoint:{
					itemStyle:{
						color:'red'
					}
				},
				data:countList.value
			},
			{
				name:'研判',
				type:'line',
				stack: '总量',
				symbol:'circle',
				symbolSize: 8,
				itemStyle: {
					color:'#00d4c7',
				},
				lineStyle: {
					color: "#00d4c7",
					width:1
				},
				areaStyle: {
					//color: '#94C9EC'
					color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
						offset: 0,
						color: 'rgba(7,44,90,0.3)'
					}, {
						offset: 1,
						color: 'rgba(0,212,199,0.9)'
						}
					]),
				},
				data:pycountList.value
			},
			{
				name:'有效',
				type:'line',
				stack: '总量',
				symbol:'circle',
				symbolSize: 8,
				itemStyle: {
					color: '#aecb56'
				},
				lineStyle: {
					color: "#aecb56",
					width:1
				},
				areaStyle: {
					color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
						offset: 0,
						color: 'rgba(7,44,90,0.3)'
					}, {
						offset: 1,
						color: 'rgba(114,144,89,0.9)'
						}]),
				},
				data:yxcountList.value
      }
    ]
  })
}
onMounted(() => {
  handleChange()
})
</script>

<style lanf="scss" scoped>
.content{
  height: calc(100% - 40px);
  width: 100%;
  position: relative;
}
.radio-group{
 position: absolute;
 right: 30px;
 top: 20px;
 z-index: 2;
}
.chart{
  height: 100%;
  width: 100%;
  padding: 10px 10px;
  box-sizing: border-box;
}
</style>